<template>
	<view class="content">
		<view class="list">
			<view v-if="info.list&&info.list.length > 0">
				<view class="title">
					<view>{{obj.roomName}}</view>
					<view class="switch-icon" @click="switchtab" v-if="info.list&&info.list.length > 1">切换</view>
				</view>
				<view class="list-point">
					<view class="row bold">门锁电量: {{obj.power || 0}}%</view>
					<view class="row">{{obj.updataTime}}</view>
				</view>
				<view class="list-box" v-for="(item,index) in info.lockList" :key="index">
					<view class="title">
						<view>{{item.roomName}}</view>
					</view>
					<view class="li row">
						<view class="tit">授权类型：</view>
						<view class="txt fill">在线密码</view>
						<view class="btn1" v-if="item.passwordStatus == 4">待激活</view>
					</view>
					<view class="li row" v-if="item.password || item.passwordStatus == 4">
						<view class="tit">密码值：</view>
						<view class="txt fill">{{item.password}}</view>
						<view class="btn" v-if="item.passwordStatus == 1 || item.passwordStatus == 4" @click="edit(item)">修改</view>
					</view>
					<view class="li row">
						<view class="tit">授权有效期：</view>
						<view class="txt fill" v-if="item.passwordType == 0">长期有效</view>
						<view class="txt fill" v-else-if="item.startTime && item.passwordType != 0">{{timestamp(item.startTime)}}~{{timestamp(item.endTime)}}</view>
						<view class="txt fill" v-else> -- </view>
					</view>
				</view>
			</view>
			<view v-else>
				<u-empty mode="data" icon="https://www.mescroll.com/img/mescroll-empty.png"></u-empty>
			</view>
		</view>
		<uni-popup ref="popup" type="center">
			<view class="popupBox">
				<view class="tit">修改密码</view>
				<view class="inputBox">
					<input type="number" maxlength="6" v-model="passWord" class="input" placeholder="输入新密码（6位数字）">
				</view>
				<view class="btnBox row">
					<view class="btn fill" @click="cancel">取消</view>
					<view class="btn sure fill" @click='newDoorLock'>确定</view>
				</view>
			</view>
		</uni-popup>
		<uni-popup ref="checkpopup" type="bottom" background-color="rgba(0,0,0,0)">
			<view class="check-popup">
				<view class="cancel" @click="cancel1">取消</view>
				<view>
					<picker-view indicator-style="50px" :value="value" @change="bindChange" class="picker-view">
					    <picker-view-column>
					        <view class="item" v-for="(item,index) in info.list" :key="index">{{item.roomName}}</view>
					    </picker-view-column>
					</picker-view>
				</view>
				<view class="btn" @click="confirm">确定</view>
			</view>
		</uni-popup>
	</view>
</template>
<script setup lang="ts">
	import { reactive,ref } from "vue";
	import { onLoad } from "@dcloudio/uni-app"
	import { getDoorLockList, getDoorLock, setDoorLock } from '@/common/API/ammeters'
	import dayjs from "dayjs"
	
	//处理时间戳
	const timestamp = (val : any, s) => {
		return !s ? dayjs(val).format('YYYY-MM-DD') : dayjs(val).format('YYYY-MM-DD HH:mm:ss')
	}
	const value = ref([0])
	const info = reactive({
		list: [],
		items: {},
		lockList: []
	})
	const checkpopup = ref(false)
	const form = reactive({
		pageSize:10,
		pageNum:1,
		pages:0,
	})
	//当前房间
	const obj = reactive({
		roomName: '',
		power: '',
		updataTime: ''
	})
	//密码数据
	const str = reactive({
		deviceNo: '',
		thirdPassId: '',
		startTime: '',
		endTime: ''
	})
	const passWord = ref(null)
	const popup = ref(false)
	//修改密码
	const edit = (data) => {
		console.log(data)
		passWord.value = data.password
		str.deviceNo = data.deviceNo
		str.thirdPassId = data.thirdPassId
		str.startTime = data.startTime
		str.endTime = data.endTime
		info.items = data
		popup.value.open()
	}
	//修改密码取消
	const cancel = () => {
		popup.value.close()
	}
	//切换tab弹窗取消
	const cancel1 = () => {
		checkpopup.value.close()
	}
	//切换tab
	const switchtab = () => {
		checkpopup.value.open()
	}
	//修改密码 接口密码状态 0冻结 1生效 2过期 3未生效 4执行中 5添加失败
	const newDoorLock = async () => {
		if(!passWord.value){
			return
		}
		let userInfo1 = uni.getStorageSync('userInfo')
		let data = {
			userId: userInfo1.id,
			operatorName: userInfo1.name,
			deviceNo: str.deviceNo,
			userName: userInfo1.name,
			mobile: userInfo1.mobile,
			password: passWord.value,
			thirdPassId: str.thirdPassId,
			startTime: str.startTime,
			endTime: str.endTime
		}
		let res = await setDoorLock(data)
		uni.showToast({
			title:'修改成功',
			icon:'success'
		});
		getList()
		popup.value.close()
	}
	//获取门锁列表
	const getList = async () => {
		// let params = {
		// 	pageNum: form.pageNum,
		// 	pageSize: form.pageSize
		// }
		let res = await getDoorLockList()
		obj.power = res[value.value[0]].power
		obj.updataTime = dayjs(res[value.value[0]].updataTime).format('YYYY-MM-DD HH:mm:ss')
		obj.roomName = res[value.value[0]].roomName
		getLockList(res[value.value[0]].deviceNo)
		info.list = res
	}
	//获取密码列表
	const getLockList = async (no) => {
		let userInfo = uni.getStorageSync('userInfo')
		let res = await getDoorLock(no, userInfo.mobile)
		info.lockList = res
	}
	//绑定选项
	const bindChange = (e) =>{
		value.value = e.detail.value
	}
	//切换tab
	const confirm = () => {
		obj.power = info.list[value.value[0]].power
		obj.updataTime = dayjs(info.list[value.value[0]].updataTime).format('YYYY-MM-DD HH:mm:ss')
		obj.roomName = info.list[value.value[0]].roomName
		getLockList(info.list[value.value[0]].deviceNo)
		checkpopup.value.close()
	}
	onLoad(()=>{
		getList()
	})
</script>
<style lang="scss" scoped>
	.content {
		.list {
			margin: 0 0 16rpx;
			padding: 0 32rpx;
			.title {
				font-size: 32rpx;
				line-height: 44rpx;
				margin: 20rpx 0;
				display: flex;
				.switch-icon{
					color: rgba(42, 130, 228, 1);
					margin-left: 20rpx;
				}
			}
			.list-point{
				background: #fff;
				border-radius: 16rpx;
				padding: 16rpx;
				.row{
					color: rgba(42, 130, 228, 1);
					display: flex;
					justify-content: center;
				}
				.bold{
					font-size: 36rpx;
					margin-bottom: 14rpx;
				}
			}
			.list-box{
				background: #fff;
				border-radius: 16rpx;
				padding: 32rpx;
				margin: 20rpx 0;
			}
			.li {
				&:last-child {
					border: none;
				}

				.tit {
					color: #999;
					width: 170rpx;
					margin-right: 20rpx;
					line-height: 72rpx;
				}

				.txt {
					line-height: 72rpx;
				}

				.btn {
					color: $uni-color-primary;
				}
				.btn1{
					color: rgba(247, 7, 7, 1);
				}
			}
		}
	}

	.popupBox {
		background: #fff;
		width: 528rpx;
		border-radius: 16rpx;
		margin: 0 auto;
		overflow: hidden;

		.tit {
			text-align: center;
			font-size: 32rpx;
			line-height: 44rpx;
			padding: 56rpx 0;
		}

		.inputBox {
			padding: 0 40rpx;

			.input {
				border-radius: 8rpx;
				border: 2rpx solid #ccc;
				height: 84rpx;
				line-height: 84rpx;
				padding: 0 24rpx;
				font-size: 28rpx;
			}
		}

		.btnBox {
			margin-top: 80rpx;

			.btn {
				height: 96rpx;
				line-height: 96rpx;
				text-align: center;
				background: #eee;
				font-size: 36rpx;

				&.sure {
					background-color: $uni-color-primary;
					color: #fff;
				}
			}
		}
	}
	.check-popup{
		height: 530rpx;
		border-radius: 28rpx 28rpx 0 0;
		background: rgba(255, 255, 255, 1);
		text-align: center;
		.picker-view{
			height: 200rpx;
		}
		.cancel{
			color: rgba(153, 153, 153, 1);
			font-size: 26rpx;
			text-align: right;
			padding: 32rpx;
		}
		.btn{
			margin: 94rpx 32rpx 40rpx 32rpx;
			border-radius: 200rpx;
			background: rgba(253, 150, 24, 1);
			color: #fff;
			border-radius: 200rpx;
			height: 84rpx;
			line-height: 84rpx;
			font-size: 32rpx;
		}
	}
</style>